<template>
  <rx-layout>
    <div slot="center" style>
      <rx-fit :isheader="isheader">
        <div slot="toolheader" foldheader="true" foldbtn="false" border="false">
          <div class="table-operator">
            <rx-button alias="groupMsgAdd" :butn-icon="'plus'" :butn-type="'primary'" :show-no-right="true"
                       @click="add">{{$ti18('rxList.newBtn','新建')}}
            </rx-button>
            <a-dropdown v-if="removeEnable && selectedRowKeys.length > 0">
              <rx-button alias="groupMsgDelete" :butn-icon="'delete'" :butn-type="'danger'"
                         :show-no-right="false" @click="delByIds(selectedRows)">{{$ti18('rxList.delBtn','删除')}}
              </rx-button>
            </a-dropdown>

          </div>
          <span class="search-btn-box" v-if="!isheader">
            <span class="search-btn" @click.stop="searchshow"><i class="iconfont iconguolv"></i>{{$ti18('rxList.leachBtn','过滤')}}</span>
          </span>
        </div>
        <div  btnalign="right" slot="searchbar" v-if="fitSearch" @search="search" @cancel="cancel"  @close="closeSearchbar">
          <a-form :layout="colLayout">
            <a-row :gutter="24">
              <a-col :span="colSpan">
            <a-form-item :label="i18n('form.sender','发送人')">
                    <a-input :placeholder="i18n('form.sender','发送人','input')" v-model="queryParam.Q_SENDER__S_LK"/>
                  </a-form-item>
              </a-col>
              <a-col :span="colSpan">
             <a-form-item :label="i18n('timeFrom','消息创建时间 从')">
                    <a-date-picker
                      style="width: 100%;"
                      :placeholder="i18n('createTime','请输入任务创建时间')"
                      v-model="queryParam['Q_CREATE_TIME__D_GT']"
                      format="YYYY-MM-DD"
                    />
                  </a-form-item>
              </a-col>
              <a-col :span="colSpan">
                  <a-form-item :label="i18n('to','至')">
                    <a-date-picker
                      style="width: 100%;"
                      :placeholder="i18n('createTime','请输入任务创建时间')"
                      v-model="queryParam['Q_CREATE_TIME__D_LT']"
                      format="YYYY-MM-DD"
                    />
                  </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <rx-grid
          ref="table"
          :allowRowSelect="true"
          :multiSelect="true"
          :bordered="isBorder"
          :columns="columns"
          :defaultPageSize="10"
          url="/api-portal/portal/core/infInnerMsg/queryGroupMsg"
          :queryParam="queryParam"
          data-field="result.data"
          :pageSizeOptions="['10','30','40']"
          id-field="msgId"
          @selectChange="onSelectChange"
        >
          <span slot="appId" slot-scope="{ text, record }">
              {{allApps[text]?$i18(allApps[text].appName,'应用名称'):$ti18('rxList.noAppName','无')}}
          </span>
          <span slot="isRead" slot-scope="{text}">
             <a-tag
               :color="text=='yes' ? 'green' : 'red'">
                <span v-if="text=='yes'">{{i18n('read','已读')}}</span>
                <span v-else>{{i18n('unread','未读')}}</span>
              </a-tag>
            </span>
          <span slot="content" slot-scope="{text}">
           <p v-html="text"></p>
          </span>
          <span slot="action" slot-scope="{ text, record }" class="actionIcons">
            <span @click.stop="readMessage(record)">{{i18n('list.view','查看')}}</span>
            <span v-if="removeEnable && showBtn(false)" @click="delByIds([record])">{{$ti18('rxList.delBtn','删除')}}</span>
          </span>
        </rx-grid>
        <div>
          <a-drawer
            :title="i18n('list.viewMsg','查看消息')"
            placement="right"
            :closable="false"
            :visible="visible"
            @close="onClose"
            :width="400"
          >
            <ReadMessage :infInnerMsg="infInnerMsg"></ReadMessage>
          </a-drawer>
        </div>
      </rx-fit>
    </div>
  </rx-layout>
</template>

<script>
  import InfInnerMsgApi from '@/api/portal/core/infInnerMsg'
  import InfInnerMsgEdit from './InfInnerMsgEdit'
  import ReadMessage from './ReadMessage'
  import {BaseList, Util} from "@lowcode/jpaas-common-lib";
  import { mapState} from 'vuex';

  export default {
    name: 'InfInnerMsgList',
    mixins: [BaseList],
    components: {
      ReadMessage
    },
      computed: {
          ...mapState({
              // 所属应用
              allApps: state => state.appSetting ? state.appSetting.allApps : {}
          }),
      },
    data() {
      return {
        columns: [
          {
            title: this.$ti18('rxList.index','序号'),
            type: 'indexColumn',
            width: 60,
            dataIndex: 'serial',
            scopedSlots: {customRender: 'serial'}
          },
          {title: this.i18n('form.msgTitle','标题'), dataIndex: 'msgTitle', width: 160},

          {title: this.i18n('form.sender','发送人'), dataIndex: 'sender', width: 100},
          {title: this.i18n('form.msgClassify','消息分类'), dataIndex: 'category', width: 130},
          {title: this.i18n('form.app','所属应用'), dataIndex: 'appId', width: 140, sortField: 'APP_ID_',scopedSlots: {customRender: 'appId'}},
            {title: this.i18n('form.status','状态'), dataIndex: 'isRead', width: 60, scopedSlots: {customRender: 'isRead'}},
            {title: this.$ti18('rxForm.createTime','创建时间'), dataIndex: 'createTime', sorter: true, sortField: 'CREATE_TIME_', width: 120},
          {title: this.$ti18('rxList.action','操作'), width: 100, dataIndex: 'action', scopedSlots: {customRender: 'action'}}
        ],
        component: InfInnerMsgEdit,
        comment: this.i18n('list.shortMsg','内部短消息'),
        widthHeight: ['800px', '600px'],
        visible: false,
        infInnerMsg: {}
      }
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "infInnerMsg", key);
        },
      delByIds(records) {
        var recIds = [];
        for (var i = 0; i < records.length; i++) {
          recIds.push(records[i].recId);
        }
        InfInnerMsgApi.delByRecIds({recIds: recIds.join(',')}).then(res => {
          this.$refs.table.loadData()
        });
        return;
      },
      getListByParams(parameter) {
        return InfInnerMsgApi.queryGroupMsg(parameter)
      },
      readMessage(record) {
        if (record.isRead != 'yes') {
          InfInnerMsgApi.readMessage({msgId: record.msgId}).then(res => {
            this.$refs.table.loadData()
          });
        }
        this.visible = true;
        this.infInnerMsg = record;
      },
      onClose() {
        this.visible = false;
      },
      search() {
      this.$refs.table.loadData()
     },
     cancel() {
      this.resetSearch()
    },
      closeSearchbar(){
        //关闭过滤弹窗；（点击X触发）
        this.fitSearch = false ;
      },
    }
  }
</script>
<style scoped>

</style>

